<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加好友</title>
    <link rel="icon" href="../images/touxiang.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript">
        function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }

        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }
    </script>
</head>

<body>
    <img src="images/logo.png" alt="" id="logo">
    <ul id="navigation">
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <center><a href="#">你想看的</a></center>
            <ul>
                <li><a href="../index.html">我的主页</a></li>
                <li><a href="geren.html">个人信息</a></li>
                <li><a href="photo.html">摄影记录</a></li>
                <li><a href="ACG.html">最爱の动漫</a></li>
                <li><a href="friend.html">添加好友</a></li>
            </ul>
        </li>
    </ul>
    <div class="box">
        <h3>好友信息填写</h3>
        <form action="" method="post" id="myform">

            <fieldset>

                <div class="useName"><label for="useName">姓名：</label><input type="text" id="useName" /></div>
                性别：<input type="radio" name="sex" value="男" checked="checked">男<input type="radio" name="sex"
                    value="女">女<input type="radio" name="sex" value="保密">保密
                <br>
                来自 <select name="" id="">
                    <option selected="selected">中国</option>
                    <option value="">日本</option>

                    <option value="">美国</option>

                </select>
                <br>
                喜欢的歌：<input type="sing" id="sing" />
                <br>
                想和我交朋友的原因：
                <input type="checkbox" value="1">长得帅
                <input type="checkbox" value="2">很可爱
                <input type="checkbox" value="3">才华横溢
                <input type="checkbox" value="4">以上都不是
                <br>
                想对我说的话: <br><textarea rows="4" cols="40"></textarea>
                <br>
                验证码：
                <input type="text" id="randcode">
                <div id="code" onclick="document.getElementById('code').innerHTML = NewRandCode()"></div>
                <input type="button" value="换一个" onclick="document.getElementById('code').innerHTML = NewRandCode()">
                <br>
                <input type="button" value="提交" onclick="validateCode()">
                <input type="reset" value="重置">
            </fieldset>
        </form>
    </div>
    <script>
        var a = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g',
            'h', 'i', 'j',
            'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
        ];

        function NewRandCode() {
            var randpos = "";
            for (var i = 0; i < 5; i++) {
                randpos += a[Math.ceil(Math.random() * 35)];
            }
            return randpos;
        }
        document.getElementById("code").innerHTML = NewRandCode();

        function validateCode() {
            var checkCode = document.getElementById("code").innerHTML;
            var inputCode = document.getElementById("randcode").value;
            if (inputCode.length <= 0) {
                alert("请输入验证码！");
                NewRandCode();
                document.getElementById("code").innerHTML = NewRandCode();
            } else if (inputCode.toUpperCase() != checkCode.toUpperCase()) {
                alert("验证码输入有误！");
                NewRandCode();
                document.getElementById("code").innerHTML = NewRandCode();
            } else {
                alert("提交成功,谢谢！");
            }
        }
    </script>
</body>

</html>